<template>
  <div>
    <el-container class="con_section">
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" v-bind:style="clientHeight"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse="isCollapse" @select="handleSelect">
             <template v-for="item in menuList" >
                    <el-submenu :index="item.path" v-if="undefined!=item && item.pid == 0">
                      <template slot="title">
                        <i :class="item.icon" style="margin: auto"></i>
                        <span slot="title">{{item.menuName}}</span>
                      </template>
                      <el-menu-item v-for="(itemChild , index) in item.children" :index="itemChild.path" :key="index" v-if="itemChild.menuName">
                        <i :class="itemChild.icon" style="margin-left: 40px"></i>
                        <span slot="title"  >{{itemChild.menuName}}</span>
                      </el-menu-item>
                    </el-submenu>
                    <el-menu-item :index="item.path" v-else>
                      {{item.menuName}}
                    </el-menu-item>
                  </template>
    </el-menu>
      <el-main class="home_main">
              <div style="margin-top:10px;margin-right: 50px">
                <router-view></router-view>
              </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>

  import SysUser from '../views/sys/sys-user/SysUser'
    export default {

      mounted(){
        this._getUserMenu();
        this. _getHeight();
      },

      components:{
        SysUser
      },

        name: "HBody",
      props:{
        isCollapse:false
      },
      data(){
          return {
            menuList:[],
            icon:'el-icon-message',

            clientHeight:'height 800px',
          }

      },

      methods:{
        handleSelect(key, keyPath){
          console.log('KEYpATH===========',keyPath);
          this.$router.push(keyPath[1]);
        },


        _getHeight(){
        this.clientHeight='height: '+   (document.documentElement.clientHeight-60)+'px;';
        },

        _getUserMenu(){
          this.$http.get('/sys_resource/list_menu').then(res=>{
            let returnData=res.data;
            this.menuList=returnData.data;
          }).catch(err=>{
            this.$router.push({path:'/login',query:{}});
            console.log(err)
          })
        }


      }
    }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 210px;
    min-height: 400px;
  }
</style>
